<template>
  <div class="app-container">
    <div v-if="riskDynamicsShow">
      <charts
        ref="charts"
        v-if="riskDynamicsShow"
        :loading="loading"
      />
      <div class="search">
        <el-form
          ref="queryForm"
          class="queryForm"
          :inline="true"
          :model="formInline"
          label-width="auto"
        >
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item
                label="企业名称"
                class="formItem"
              >
                <el-input
                  v-model="formInline.qymc"
                  placeholder="请输入企业名称"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="监控时间"
                class="formItem"
              >
                <el-date-picker
                  v-model="formInline.updateTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="handleSearch"
                >搜索</el-button>
                <el-button
                  icon="el-icon-refresh"
                  @click="handleReset"
                >清空</el-button>
              </el-form-item></el-col>
          </el-row>
        </el-form>
        <div class="list">
          <div style="margin: 0 0 10px 0;display:flex;background: #fff;">
            <el-button
              size="small"
              type="primary"
              @click="showDialog = true"
              icon="el-icon-thumb"
            >监控指引</el-button>
            <el-button
              size="small"
              type="primary"
              @click="handelDownloadTemp"
              icon="el-icon-download"
            >模板下载</el-button>
            <el-upload
              :action="uploadUrl"
              class="uplaod"
              :headers="headers"
              :show-file-list="false"
              ref="addManageUpload"
              :auto-upload="true"
              :on-success="handleSuccess"
              :on-progress="uploadProgress"
              accept=".xls, .xlsx"
              style="margin-left:10px;"
            >
              <el-button
                icon="el-icon-upload"
                :loading="uploading"
                size="small"
                type="primary"
              >导入</el-button>
            </el-upload>
          </div>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            ref="table"
            highlight-current-row
            v-loading="loading"
          >
            <el-table-column
              label="序号"
              type="index"
              align="center"
              width="100"
            >
              <template slot-scope="scope">
                <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="企业名称"
              prop="qymc"
              align="center"
            ></el-table-column>
            <el-table-column
              label="风险动态"
              prop="signNature"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  size="mini"
                  plain
                  :disabled="scope.row.isSq == 'N'"
                  @click="goRiskDynamics(scope.row.qymc,'0')"
                >高风险{{ scope.row.isSq == 'Y' ? scope.row.highNum : '--' }}</el-button>
                <el-button
                  type="warning"
                  size="mini"
                  plain
                  :disabled="scope.row.isSq == 'N'"
                  @click="goRiskDynamics(scope.row.qymc,'1')"
                >中风险{{ scope.row.isSq == 'Y' ? scope.row.mediumNum : '--' }}</el-button>
                <el-button
                  plain
                  size="mini"
                  type="primary"
                  @click="goRiskDynamics(scope.row.qymc,'2')"
                  :disabled="scope.row.isSq == 'N'"
                >
                  低风险{{ scope.row.isSq == 'Y' ? scope.row.lowNum : '--' }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column
              label="监控时间"
              prop="yjTime"
              align="center"
              width="200"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.yjTime
                    ? scope.row.yjTime.slice(0, 11)
                    : scope.row.yjTime
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="250"
            >
              <template slot-scope="scope">
                <!-- <el-button
                  size="small"
                  type="text"
                  @click.stop="riskViewBtn(scope.row)"
                >风险概览</el-button> -->
                <el-button
                  size="small"
                  type="text"
                  v-if="scope.row.isSq == 'Y'"
                  @click.stop="goRiskDynamics(scope.row.qymc)"
                >风险动态</el-button>
                <el-button
                  size="small"
                  type="text"
                  v-if="scope.row.isSq == 'Y'"
                  @click.stop="cancelMonitoringBtn(scope.row)"
                >取消监控</el-button>
                <span v-if="scope.row.isSq == 'N'">该企业暂未授权</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              @size-change="sizeChange"
              @current-change="pageChange"
              :current-page="pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <!-- 风险概览 -->
      <el-dialog
        title="风险概览"
        :visible.sync="showFlag"
        append-to-body
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        center
      >
        <div>
          <p class="spanClass">企业信息</p>
          <el-descriptions
            title=""
            border
            :column="2"
            style="margintop: 20px"
          >
            <el-descriptions-item label="企业名称">{{
              comInfo.qymc
            }}</el-descriptions-item>
            <el-descriptions-item label="法定代表人">{{
              comInfo.fddbr
            }}</el-descriptions-item>
            <el-descriptions-item label="注册资本(万元)">{{
              comInfo.zczb
            }}</el-descriptions-item>
            <el-descriptions-item label="成立日期">{{
              comInfo.clrq
            }}</el-descriptions-item>
            <el-descriptions-item label="登记状态">
              {{ comInfo.djzt }}</el-descriptions-item>
            <el-descriptions-item label="所属行业">
              {{ comInfo.sshy }}</el-descriptions-item>
          </el-descriptions>
          <div style="margintop: 20px">
            <p
              class="spanClass"
              style="margin: 20px 0"
            >风险分类</p>
            <div style="margintop: 10px">
              <el-button
                @click="fenbuBtn"
                :class="[!isShowCha ? 'activeCla' : '']"
              >类型分布</el-button>
              <el-button
                @click="liveBtn"
                :class="[isShowCha ? 'activeCla' : '']"
              >等级分布</el-button>
            </div>
            <div
              class="fxdlfb"
              v-loading="loadingChart"
              element-loading-text="加载中"
            >
              <div
                id="fxdlChart"
                v-show="!isShowCha"
              ></div>
              <div
                id="fxdjChart"
                v-show="isShowCha"
              ></div>
            </div>
            <!-- <div
              class="fxdlfb"
              v-loading="loadingChartTwo"
              element-loading-text="加载中"
            >
            </div> -->
          </div>
        </div>
        <div
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            type="primary"
            @click="showFlag = false"
          >关闭</el-button>
        </div>
      </el-dialog>
      <!--  风险动态-->
      <el-dialog
        title="风险动态"
        :visible.sync="showFlagTwo"
        append-to-body
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        center
        width="60%"
      >
        <div class="select">
          <p class="spanClass">筛选条件</p>
          <p class="selectType">
            <span>风险大类：</span>
            <span
              @click="handlActiveOne('all')"
              :class="[{ cur: activeSelectOne == 'all' }]"
            >全部</span>
            <span
              v-for="(ite, i) in dataFXDL"
              :key="ite + i"
              @click="handlActiveOne(ite.value)"
              :class="[{ cur: activeSelectOne == ite.value }]"
            >{{ ite.label }}
            </span>
          </p>
          <p class="selectType">
            <span>风险等级：</span>
            <span
              @click="handlActiveTwo('all')"
              :class="[{ cur: activeSelectTwo == 'all' }]"
            >全部</span>
            <span
              v-for="(ite, i) in dataYJDJ"
              :key="ite + i"
              @click="handlActiveTwo(ite.value)"
              :class="[{ cur: activeSelectTwo == ite.value }]"
            >{{ ite.label }}
            </span>
          </p>
          <p class="selectType">
            <span style="marginright: 24px">时间：</span>
            <span
              @click="handlActiveTree('all')"
              :class="[{ cur: activeSelectTree == 'all' }]"
              style="marginleft: 23px"
            >全部</span>
            <span
              v-for="(ite, i) in selectOptions3"
              :key="ite + i"
              @click="handlActiveTree(ite.code)"
              :class="[{ cur: activeSelectTree == ite.code }]"
            >{{ ite.fxdl }}
            </span>
          </p>
        </div>
        <div>
          <p
            class="spanClass"
            style="margin: 20px 0"
          >风险列表</p>
          <el-table
            :data="tableDataTwo"
            border
            style="width: 100%"
            ref="table"
            highlight-current-row
            v-loading="loadingTwo"
          >
            <el-table-column
              label="序号"
              type="index"
              align="center"
              width="100"
              :index="indexMethod"
            >
              <!-- <template slot-scope="scope">
                <span>{{ (pageNumTwo - 1) * pageSizeTwo + scope.$index + 1 }}</span>
              </template> -->
            </el-table-column>
            <el-table-column
              label="企业名称"
              prop="qymc"
              align="center"
            ></el-table-column>
            <el-table-column
              label="风险类型"
              prop="fxdl"
              align="center"
              width="80px"
              :formatter="fxdlFormat"
            ></el-table-column>
            <el-table-column
              label="风险名称"
              prop="yjxl"
              align="center"
              width="120px"
            ></el-table-column>
            <el-table-column
              label="风险等级"
              prop="yjdj"
              align="center"
              width="80px"
              :formatter="yjdjFormat"
            ></el-table-column>
            <el-table-column
              label="发生时间"
              prop="yjTime"
              align="center"
              width="120px"
            ></el-table-column>
            <el-table-column
              label="风险详情"
              prop="yjxq"
              align="center"
              show-overflow-tooltip
            ></el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination
            @size-change="sizeChangeTwo"
            @current-change="pageChangeTwo"
            :current-page="pageNumTwo"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSizeTwo"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalTwo"
          >
          </el-pagination>
        </div>
        <div
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            type="primary"
            @click="showFlagTwo = false"
          >关闭</el-button>
        </div>
      </el-dialog>
      <el-dialog
        title="监控指引"
        center
        :visible.sync="showDialog"
        width="40%"
        custom-class="dialog"
        :show-close="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <div class="intrMsg">
          <p class="introduce">
            您可在风险监控页面导入监控企业名单，也可在企业画像中对企业发起监控，监控后可在风险监控页面中查看风险详情！
          </p>
          <!-- <el-image
            class="img"
            :src="require('@/assets/jkzy.png')"
            :preview-src-list="srcList"
          ></el-image> -->
          <el-carousel :autoplay='false'>
            <el-carousel-item
              v-for="item,index in srcList"
              :key="item"
            >
              <el-image
                class="img"
                :src="srcList[index]"
                :preview-src-list="srcList"
              ></el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            type="primary"
            @click="showDialog = false"
          >关闭</el-button>
        </div>
      </el-dialog>
    </div>
    <risk-dynamics
      v-else
      :companyInfo="comInfo"
      :type="type"
      @back="back"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getCbInfo } from '@/api/portay.js'
import riskDynamics from './modules/riskDynamics.vue'
import charts from './modules/charts.vue'
import {
  getYjfb,
  getFxdj,
  getQYPushHistory,
  getEsPushHistory,
  getLevelChart,
  getTypeChart,
  getQyfx,
  deleteRelationship,
} from '@/api/manager.js'
import { downloadTemp } from '@/api/riskWarning.js'
import * as echarts from 'echarts'
export default {
  components: { riskDynamics, charts },
  data() {
    return {
      uploadUrl: '',
      headers: undefined,
      uploading: false,
      riskDynamicsShow: true,
      isShowCha: false,
      // 搜索表单
      formInline: {
        qymc: '',
        updateTime: [],
      },
      tableData: [],
      loading: false,
      loadingTwo: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      showFlag: false,
      dataFXDL: [],
      dataYJDJ: [],
      showFlagTwo: false,
      selectOptions1: [
        { code: '0', fxdl: '法律风险', num: 0 },
        { code: '1', fxdl: '经营风险', num: 0 },
        { code: '2', fxdl: '法律2风险', num: 0 },
        { code: '3', fxdl: '法律3风险', num: 0 },
      ],
      activeSelectOne: 'all',
      selectOptions2: [
        { code: '0', fxdl: '高风险', num: 0 },
        { code: '1', fxdl: '中风险', num: 0 },
        { code: '2', fxdl: '低风险', num: 0 },
      ],
      activeSelectTwo: 'all',
      selectOptions3: [
        { code: '0', fxdl: '今天', num: 0 },
        { code: '7', fxdl: '近7天', num: 0 },
        { code: '30', fxdl: '近30天', num: 0 },
      ],
      activeSelectTree: 'all',
      pageNumTwo: 1,
      pageSizeTwo: 10,
      totalTwo: 0,
      loadingChart: true,
      loadingChartTwo: true,
      comInfo: {},
      type: 'all',
      tableDataTwo: [],
      showDialog: false,
      srcList: [require('@/assets/jkzy2.png'), require('@/assets/jkzy.png')],
      selectQymc: '',
    }
  },
  watch: {
    riskDynamicsShow: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.handleReset()
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    ...mapGetters(['token']),
  },
  created() {
    this.headers = { TOKEN: this.token }
    this.uploadUrl =
      process.env.VUE_APP_BASE_API + '/qyxx/jrfkFxyjRelationship/import'
    let params = {
      pageNum: 1,
      pageSize: 10,
      startTime: '',
      endTime: '',
      qymc: '',
    }
    getQYPushHistory(params).then((res) => {
      if (res.status) {
        this.showDialog = res.data ? false : true
      }
    })
    this.handleSearch()
    this.getDict()
  },
  methods: {
    goRiskDynamics(val, type = 'all') {
      let params = { feilds: val }
      this.type = type
      getCbInfo(params).then((res) => {
        if (res.status) {
          this.comInfo = res.data
          this.riskDynamicsShow = false
        }
      })
    },
    back() {
      this.riskDynamicsShow = true
    },
    indexMethod(index) {
      return (this.pageNumTwo - 1) * this.pageSizeTwo + index + 1
    },
    fenbuBtn() {
      this.isShowCha = false
    },
    liveBtn() {
      this.isShowCha = true
    },
    //获取近N天日期
    getPreviousDate(numOfDays) {
      var date = new Date()
      date.setDate(date.getDate() - numOfDays)
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      let shm = ' 00:00:00'
      return year + '-' + month + '-' + day + shm
    },
    getNewDate() {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      let shm = ' 23:59:59'
      return year + '-' + month + '-' + day + shm
    },
    //格式化
    fxdlFormat(row) {
      for (let i = 0; i < this.dataFXDL.length; i++) {
        if (this.dataFXDL[i].value == row.fxdl) {
          return this.dataFXDL[i].label
        }
      }
    },
    yjdjFormat(row) {
      for (let i = 0; i < this.dataYJDJ.length; i++) {
        if (this.dataYJDJ[i].value == row.yjdj) {
          return this.dataYJDJ[i].label
        }
      }
    },
    //测试
    handlActiveOne(e) {
      if (this.activeSelectOne == e) return
      this.activeSelectOne = e
      this.pageNumTwo = 1
      this.handleGetQyfx()
    },
    handlActiveTwo(e) {
      if (this.activeSelectTwo == e) return
      this.pageNumTwo = 1
      this.activeSelectTwo = e
      this.handleGetQyfx()
    },
    handlActiveTree(e) {
      if (this.activeSelectTree == e) return
      this.pageNumTwo = 1
      this.activeSelectTree = e
      this.handleGetQyfx()
    },
    //风险动态表格
    handleGetQyfx() {
      this.loadingTwo = true
      let params = {
        pageNum: this.pageNumTwo,
        pageSize: this.pageSizeTwo,
        qymc: this.selectQymc,
      }
      if (this.activeSelectOne == 'all') {
        delete params['fxdl']
      } else {
        params['fxdl'] = this.activeSelectOne
      }
      if (this.activeSelectTwo == 'all') {
        delete params['yjdj']
      } else {
        params['yjdj'] = this.activeSelectTwo
      }
      if (this.activeSelectTree == 'all') {
        delete params['startTime']
        delete params['endTime']
      } else {
        params['startTime'] = this.getPreviousDate(this.activeSelectTree)
        params['endTime'] = this.getNewDate()
      }
      getQyfx(params).then((res) => {
        this.tableDataTwo = res.data.records
        this.totalTwo = Number(res.data.total)
        this.loadingTwo = false
      })
    },
    //获取企业信息
    getCbInfoFun(e) {
      let params = { feilds: e }
      getCbInfo(params).then((res) => {
        if (res.status) {
          this.comInfo = res.data
        }
      })
    },
    async getDict() {
      const dataYJDJ = await this.$store.dispatch('asyncApi/getDict', {
        code: 'YJDJ',
      })
      this.dataYJDJ = dataYJDJ
      const dataFXDL = await this.$store.dispatch('asyncApi/getDict', {
        code: 'HXFXDL',
      })
      this.dataFXDL = dataFXDL
    },

    //风险概览
    riskViewBtn(e) {
      this.isShowCha = false
      console.log(e)
      this.getCbInfoFun(e.qymc)
      ;(this.showFlag = true),
        // 获取风险等级分布
        getLevelChart({ tyshxydm: e.tyshxydm }).then((res) => {
          if (res.status) {
            this.loadingChart = false
            let data = []
            let cLabel = []
            res.data.map((item) => {
              data.push({ value: item.num, name: item.fieldName })
              cLabel.push(item.fieldName)
            })
            //fxdjChart
            this.jrjgTrend(data, cLabel)
          }
        })
      getTypeChart({ tyshxydm: e.tyshxydm }).then((res) => {
        if (res.status) {
          this.loadingChartTwo = false
          let cData = []
          res.data.map((item) => {
            cData.push({ value: item.num, name: item.fieldName })
          })

          this.$nextTick(() => {
            if (cData.length !== 0) {
              var chartDom = document.getElementById('riskLevel')
              var fxdlChart = echarts.init(chartDom)
              var option

              option = {
                title: {
                  top: 20,
                  text: '',
                  fontSize: '18',
                },
                tooltip: {
                  trigger: 'item',
                  formatter: '{b} :{c}条<br/>占比:{d}%',
                },
                legend: {
                  // bottom: "2%",
                  // left: "center",
                  right: 'right',
                  orient: 'vertical',
                },
                series: [
                  {
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                      show: false,
                      position: 'center',
                    },
                    emphasis: {
                      // label: {
                      //   show: true,
                      //   fontSize: "20",
                      //   fontWeight: "bold",
                      // },
                      itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                      },
                    },
                    labelLine: {
                      show: false,
                    },
                    data: cData,
                    itemStyle: {
                      emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                      },
                      normal: {
                        label: {
                          show: true,
                          formatter: '{b} :{c}条\n占比:{d}%',
                        },
                        labelLine: { show: true },
                      },
                    },
                  },
                ],
              }
              option && fxdlChart.setOption(option)
              window.addEventListener('resize', () => {
                fxdlChart.resize()
              })
            } else {
              // 以下是暂无数据显示样式(样式根据本身需求进行调整)
              var html = `<div style="position: relative;"><sapn style="position: absolute;top: 20px;font-size: 18px;font-weight: bold;"></sapn><span  style="position: absolute;top: 15vh;margin-left: 40%;color:#868686; font-size: 20px;">暂无数据</span></div>`
              document.getElementById('riskLevel').innerHTML = html
              document
                .getElementById('riskLevel')
                .removeAttribute('_echarts_instance_')
            }
          })
        } else {
          this.loadingChartTwo = false
        }
      })
    },
    //风险动态
    riskDynamic(e) {
      this.pageNumTwo = 1
      this.selectQymc = e.qymc
      this.showFlagTwo = true
      this.activeSelectOne = 'all'
      this.activeSelectTwo = 'all'
      this.activeSelectTree = 'all'
      this.handleGetQyfx()
    },
    //模板下载
    handelDownloadTemp() {
      downloadTemp().then((res) => {
        let fileName = '监控企业名单模板.xlsx'
        var link = document.createElement('a')
        link.href = window.URL.createObjectURL(res)
        link.download = fileName
        link.click()
        //释放内存
        window.URL.revokeObjectURL(link.href)
      })
    },
    //搜索
    handleSearch() {
      this.loading = true
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        startTime: this.formInline.updateTime[0],
        endTime: this.formInline.updateTime[1],
        qymc: this.formInline.qymc,
      }
      getQYPushHistory(params).then((res) => {
        if (res.status) {
          this.loading = false
          this.tableData = res.data ? res.data.records : []
          this.total = res.data ? Number(res.data.total) : 0
        }
      })
    },
    //清空
    handleReset() {
      ;(this.formInline.qymc = ''),
        (this.formInline.updateTime = []),
        this.handleSearch()
    },
    sizeChange(val) {
      this.pageSize = val
      this.pageNum = 1
      this.handleSearch()
    },
    pageChange(val) {
      this.pageNum = val
      this.handleSearch()
    },
    sizeChangeTwo(val) {
      this.pageSizeTwo = val
      this.pageNumTwo = 1
      this.handleGetQyfx()
    },
    pageChangeTwo(val) {
      this.pageNumTwo = val
      this.handleGetQyfx()
    },
    //取消监控
    cancelMonitoringBtn(e) {
      this.$confirm('确定对该企业取消风险监控?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          let params = { shtyxydm: e.tyshxydm }
          deleteRelationship(params).then((res) => {
            if (res.status) {
              this.handleSearch()
              this.$message({
                type: 'success',
                message: `${res.msg}`,
              })
            } else {
              this.$message({
                type: 'error',
                message: `${res.msg}`,
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作',
          })
        })
    },
    quxiaojk(e) {},
    handleSuccess(response, file, fileList) {
      if (response.status) {
        /* if (response.data == '操作成功') {
          this.$message.success(`${response.data}`)
        } else {
          var convt = response.data.replace(/\\n/g, '<br>')
          this.$message({
            dangerouslyUseHTMLString: true,
            message: convt,
            type: 'error',
            duration: 5000,
          })
        } */
        this.uploading = false
        this.handleSearch()
        this.$alert(`${response.data}`, '', {
          confirmButtonText: '关闭',
        })
      } else {
        this.uploading = false
        /* this.$message({
          dangerouslyUseHTMLString: true,
          message: `${response.msg}`,
          type: 'error',
          duration: 5000,
        }) */
        this.$alert(`${response.msg}`, '', {
          confirmButtonText: '关闭',
        })
      }
    },
    uploadProgress(event) {
      this.uploading = true
    },
  },
}
</script>

<style scoped lang="scss">
.app-container {
  padding: 24px;
  font-size: 14px;
}
.select {
  background: #fff;
  border-radius: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .selectType {
    padding-left: 24px;
  }
  .selectType span:not(:first-child) {
    display: inline-block;
    margin-right: 20px;
    margin-top: 10px;
    padding: 4px 6px;
  }
  .selectType span:not(:first-child):hover {
    cursor: pointer;
    background-color: #1890ff;
    color: #fff;
  }
  .selectType .cur {
    background-color: #1890ff !important;
    color: #fff !important;
  }
  .selectType .disable {
    background-color: #fff;
    color: #a6a6a6;
  }
}
.fxdlfb {
  width: 100%;
  height: 350px;
  vertical-align: middle;
  border: 1px solid #eeeeee;
  border-radius: 10px;
  #fxdlChart,
  #fxdjChart,
  #fxyjChart {
    width: 800px;
    height: 340px;
  }
}
.spanClass:before {
  content: '';
  width: 20px;
  height: 20px;
  border: 3px solid #47a1ff;
  margin-right: 5px;
}
.activeCla {
  background: #47a1ff;
  color: #fff;
}
.search {
  padding: 20px 0 20px 20px;
  background: #fff;
  border-radius: 10px;
}

.list {
  background: #fff;

  .add {
    margin-bottom: 10px;
  }
}

.formItem {
  width: 100%;

  /deep/.el-form-item__content {
    width: calc(100% - 125px);

    /deep/.el-select,
    /deep/.el-cascader {
      width: 100%;
    }

    .w100 {
      width: 100% !important;
    }
  }
}

.pagination {
  width: 100%;
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.dialog-footer {
  text-align: center;
}
.introduce {
  font-size: 20px;
  text-indent: 2em;
  line-height: 30px;
  text-align: justify;
}
</style>
